<!--
 * @Author: your name
 * @Date: 2021-06-03 18:58:00
 * @LastEditTime: 2021-07-27 09:46:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\components\drawer.vue
-->
<template>
  <a-drawer :title="title" :maskClosable="maskClosable" destroy-on-close :width="width" :placement="placement" :visible="visibles" @close="onClose" :z-index="10">
    <slot name="content"></slot>
  </a-drawer>

</template>

<script>

export default {
  name: "drawer",
  props: {
    title: String,
    visible: {
      type: Boolean,
      default: false,
    },
    maskClosable: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: '1080px'
    },
    placement: {
      type: String,
      default: 'right'
    },
  },
  data () {
    return {
    };
  },
  computed: {
    visibles: {
      get: function () {
        console.log('get', this.visible, this.$store.state.setting.isShowDrawer)
        return this.visible
      },
      set: function (newValue) {
        console.log('set', newValue)
        this.visible = newValue
        return this.visible
      }
    }
  },
  methods: {
    onClose () {
      console.log(this)
      this.$emit("update:visible", false);
      this.$emit("getList");
    },
  },
};
</script>

<style lang="less" scoped>
</style>
